<template>
  <div class="Center-box">
    <div class="emr-center">
      <div class="emr-center-box">
        <section class="center-editor">
          <div class="Instance">
            <Toptoolbar :editorsInstance="editorsInstance"></Toptoolbar>
            <!--Instance是依赖内部大小的，所以预设1个空间 指定长宽尺寸-->
            <div @contextmenu.prevent="handleContextMenu" class="main-box">
              <el-tabs
                style="width: 100%; height: 100%"
                :closable="true"
                v-model="selectedDocName"
                type="border-card"
                @tab-click="tabSelected"
                @tab-remove="tabRemove"
                @tab-add="tabAdd"
              >
                <el-tab-pane
                  style="width: 100%; height: 100%; padding-bottom: 0px"
                  :label="item.showName"
                  :name="item.docName"
                  :key="item.docName"
                  v-for="item in editorsInstance.editors"
                >
                  <component :is="ThinkEditorView" :thinkEditor="item" />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import ThinkEditorView from "./ThinkEditorView.vue";
import { ThinkEditorInstance } from "@/../public/js/ThinkEditor.Instance";
import { GetRandStr, CalcDocName } from "@/../public/js/ThinkEditor.Utils";
import { ThinkEditor } from "@/../public/js/ThinkEditor";
import {
  E_PASTE_TYPE,
  E_TABLE_DELETE_MODE,
  E_TABLE_INSERT_MODE,
  E_CELL_OPT_MODE,
  E_INSTANCE_EVENT_KEY,
  E_EVENT_KEY,
  E_EVENT_HANDLE,
  E_SYSTEM_AUTH_MODE,
  E_VIEW_MODE,
  E_LAYOUT_VERTICAL_ALIGN,
  E_FORMULA_STYLE,
  E_DOC_TYPE,
  E_DISPLAY_MODE,
  E_SET_MODE,
  E_INPUT_MODE,
  E_TIME_TYPE,
} from "@/../public/js/ThinkEditor.Defined";
import Toptoolbar from "./toobarMenu.vue";
export default {
  name: "ThinkEditorInstance",
  components: {
    ThinkEditorView,
    ThinkEditorInstance,
    Toptoolbar,
  },
  computed: {},
  data() {
    return {
      //vue2用动态组件 要在data里定义一下
      ThinkEditorView: "ThinkEditorView",
      editorsInstance: new ThinkEditorInstance("病历编辑器"),
      selectedDocName: undefined,
    };
  },
  created(){
    this.editorsInstance.addEventListener(E_EVENT_KEY.fontFormat, this.OnFontFormatChange)
    this.editorsInstance.addEventListener(E_EVENT_KEY.docEditorFocus, this.OnDocEditorFocusChange)
  },
  methods: {
    tabAdd(docName) {
      
      this.CreateDocEditor(docName);
    },
    tabSelected(tab) {
      this.SelectDocEditor(tab.paneName);
    },
    tabRemove(name) {
      this.selectedDocName = name;

      this.$nextTick(() => {
        //nextTick fixed ui框架没有及时更新bug
        setTimeout(() => {
          this.CloseDocEditor(this.selectedDocName);
        }, 100);
      });
    },
    /**
     * @function 创建1个 空文档
     * @description
     * @param {String} docName - 文档名
     * @return {DocEditor}
     * @example
     *
     */
    async NewDocEditor() {
      let docName = "文档" + GetRandStr(); //GetRandStr()非必须，但提供的docName应当唯一
      let thinkEditor = await this.CreateDocEditor(docName); //note:创建thinkEditor并加入ThinkEditorInstance中管理
      thinkEditor.NewDoc(docName, E_DOC_TYPE.Entity); //note:新建空文档 或 直接打开一个现有文档
      this.SelectDocEditor(docName); //切换tab页签显示文档
      return thinkEditor;
    },
    /*********************************
     * 编辑器实例 文档相关接口封装
     * ********************************/
    /**
     * @function 创建1个 文档编辑对象 ThinkEditor
     * @description 用于打开1个文档时调用
     * @param {String} docName - 文档名,不能为空。创建后docName不可更改，可以动态更改showName
     * @example
     *   CreateDocEditor("新文档名")
     */

    async CreateDocEditor(docName) {
      /* ThinkEditorParam 供编辑器内核使用的固定参数 */
      let editorParam = {
        lib: this.$editorLibPath, //note: 建议应用自行部署的服务器下载wasm文件路径。
        fontPath: this.$editorFontPath, //note: 建议应用自行部署的字体路径。无法获取本地字体权限时，从服务器下载字体路径
        //editorId: GetRandStr(), //note: 不指定时 自动为docName_randstr
        docName: docName, //note:标识文档名,同一个editorsInstance中docName不应重复
        useInnerUI: true, //note:启用内置UI。可配置某个UI自定义实现[非必须]。
        useInnerMenuBox: true, //note:启用内置右键菜单。
      };
      let thinkEditor = new ThinkEditor(editorParam);
      //可修改showName
      // thinkEditor.showName = docName + "*";

      await thinkEditor.Init();
      
      this.editorsInstance.AddEditor(thinkEditor); //note: 将thinkEditor加入editorsInstance中管理(v-for="item in editorsInstance.editors")
      return thinkEditor;
    },

    SelectDocEditor(docName) {
      /********************************************
       * 1、新ThinkEditor第一次Load可跟随UI onMounted事件自动Load 从而显示
       * 2、后续人为切换等由editorsInstance.SelectEditor(docName)自动Load / UnLoad相关文档(ThinkEditor)
       * *****************************************/
      this.editorsInstance.SelectEditor(docName); //note: 内部 自动Load / UnLoad相关文档(ThinkEditor)
      this.UpdateDocsTabsView();
    },
    CloseDocEditor(docName) {
      let closeEditor = this.editorsInstance.GetEditor(docName);
      if (closeEditor == undefined) {
        console.error("要关闭的文档不存在：", docName);
        return;
      }
      this.editorsInstance.CloseEditor(closeEditor.docName); //note: 内部调用了thinkEditor.UnInit()
      this.UpdateDocsTabsView();
    },
    UpdateDocsTabsView() {
      let selecedEditor = this.editorsInstance.GetSelectedEditor();
      console.log(selecedEditor);
      this.selectedDocName = selecedEditor ? selecedEditor.docName : "";
    },
    OnDocEditorFocusChange(){
      console.log('thinkEditor已改变')
    },
    
    OnFontFormatChange(e){
      console.log('字体已改变')
  let data = e.data
  //可用于工具栏 动态展示字体样式
  console.log(data)
    }
  },
};
</script>
  


<style lang="scss" scoped>
.Instance {
  padding-left: 5px;
  width: 100%;
  height: 100%;
  ::v-deep .el-tabs--border-card {
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header {
    background-color: transparent;
    border: none;
  }
  ::v-deep
    .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:nth-child(1) {
    margin-left: 0px;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    margin-left: 4px;
    border-radius: 10px 10px 0 0;
    background-color: #e2ebef;
    padding: 4px 10px 4px 20px;
    color: #2e6ab3;
    line-height: 22px;
    height: 30px;
  }
  ::v-deep .el-tabs__item .el-icon-close {
    transition: 0s;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: #2e6ab3;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
    background-color: #2e6ab3;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
  }
  .main-box {
    width: 100%;
    height: 100%;
    // margin-left: 10px;
  }
  ::v-deep .el-tabs__content {
    // border: 1px solid #DCDFE6;
    border-top: none;
    padding: 0px;
    width: 100%;
    height: 693px;
    background-color: #ffffff;
    overflow: auto; /* 如果内容超出固定宽高，可以滚动查看 */
  }
}
</style>